<template>
  <el-carousel class="carousel" arrow="never">
    <el-carousel-item
      class="carouselItem"
      v-for="(item, index) in bananerList"
      :key="'banner' + index"
    >
      <img class="bannerItem" :src="item.url" alt="" srcset="" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Banner',
  data() {
    return {
      bananerList: [
        {
          url: require('@/assets/expertBg.png'),
        }
      ],
    };
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.carousel {
  // width: 1026px;
  // height: 332px;
  width:100%;
  height:450px;
  border-radius: 8px;
  overflow: hidden;
  // 内容区
  ::v-deep .el-carousel__container {
    // height: 332px;
     height:450px;
  }
  // 指示器
  ::v-deep .el-carousel__indicators {
    position: absolute;
    bottom: 60px;
    right: 60px;
    left: inherit;
    transform: none;
    .el-carousel__indicator button {
      width: 80px;
      height: 6px;
      border-radius: 2px;
      background: #fff;
      opacity: 0.4;
    }
    .el-carousel__indicator.is-active button {
      opacity: 1;
    }
  }
  .carouselItem {
    // width: 1026px;
    width: 100%;
    // height: 332px;
     height:450px;
    .bannerItem {
      // width: 1026px;
       width: 100%;
      // height: 332px;
       height:450px;
    }
  }
}
</style>
